import { useEffect, useState, useMemo } from 'react'
import { getCompanyInfoOverviewOverviewInfo } from '@/api/companyDetail/CompanyOverview'
import AboutEnterprises from './components/AboutEnterprises'
import MainBusiness from './components/MainBusiness'
import IndustrialClassification from './components/IndustrialClassification'
import MainCustomers from './components/MainCustomers'
import BusinessIndicators from './components/BusinessIndicators'
import TeamMetrics from './components/TeamMetrics'
import InnovationIndicators from './components/InnovationIndicators'
import CapitalIndicators from './components/CapitalIndicators'

import './overview.css'
export interface CompanyOverviewProps {
  companyCode: string
}

const CompanyOverview = (props: CompanyOverviewProps) => {
  const { companyCode } = props

  const [showMainCustomers, setShowMainCustomers]: any = useState(true)

  const [MainCustomerscount, setMainCustomerscount]: any = useState('')

  const [showBusinessIndicators, setShowBusinessIndicators] = useState(true)

  const [detailInfo, setDetailInfo] = useState<any>({})
  // 企业概况组件
  const anchorList: any = useMemo(
    () => [
      {
        id: '关于企业',
        label: '关于企业',
        key: 'aboutEnterprises',
        component: <AboutEnterprises companyCode={companyCode} />,
        show: true
      },
      {
        id: '主营业务',
        label: '主营业务',
        key: 'mainBusiness',
        component: <MainBusiness data={detailInfo} />,
        show: detailInfo?.mainBusiness
      },
      {
        id: '产业分类',
        label: '产业分类',
        key: 'industrialClassification',
        component: <IndustrialClassification data={detailInfo} />,
        show: detailInfo?.hsInd || detailInfo?.neaInd || detailInfo?.strategicInd
      },
      {
        id: '主要客户',
        label: '主要客户',
        key: 'mainCustomersRef',
        count: MainCustomerscount,
        component: <MainCustomers companyCode={companyCode} change_total={changeTotal} />,
        show: showMainCustomers > 0 ? true : false
      },
      {
        id: '核心产品',
        label: '核心产品', // 暂时没有内容
        key: 'coreProducts',
        component: 'coreProducts',
        show: false
      },
      {
        id: '经营指标',
        label: '经营指标',
        key: 'businessIndicators',
        component: <BusinessIndicators companyCode={companyCode} handleShow={handleShow} />,
        show: showBusinessIndicators
      },
      {
        id: '团队成员',
        label: '团队成员',
        key: 'teamMetrics',
        count: detailInfo?.companySize,
        component: <TeamMetrics data={detailInfo} />,
        show: detailInfo?.companySize || detailInfo?.companyHeadcount || detailInfo?.companyTeam?.length > 0
      },
      {
        id: '创新资质',
        label: '创新资质',
        key: 'innovationIndicators',
        count: detailInfo?.qualifiedNameList?.length,
        component: <InnovationIndicators data={detailInfo} />,
        show: detailInfo?.qualifiedNameList
      },
      {
        id: '融资情况',
        label: '融资情况',
        key: 'capitalIndicators',
        component: <CapitalIndicators data={detailInfo} companyCode={companyCode} />,
        show: detailInfo?.financingRound || detailInfo?.financingSum
      }
    ],
    [companyCode, detailInfo, showBusinessIndicators, showMainCustomers]
  )

  function handleShow(value: boolean) {
    setShowBusinessIndicators(value)
  }

  function changeTotal(value: any) {
    setShowMainCustomers(value)
    setMainCustomerscount(value)
  }

  // 企业概况信息
  async function getInfo() {
    const res = await getCompanyInfoOverviewOverviewInfo({
      companyCode: companyCode as string
    })
    setDetailInfo(res.data || {})
  }

  useEffect(() => {
    getInfo()
  }, [])
  return (
    <div className="company-overview-wrapper" id="企业概况">
      <div className="company-overview-content">
        {anchorList.map((item: any, _index: any) =>
          item.show ? (
            <div id={item.id} className="com-box" key={_index} data-count={item.count}>
              <p className="com-title">{item.label}</p>
              <div>{item.component}</div>
            </div>
          ) : null
        )}
      </div>
    </div>
  )
}

export default CompanyOverview
